import React, { Component } from 'react';
import { connect } from 'react-redux';
import NodeSearch from './NodeSearch';
import RelationSearch from './RelationSearch';
import TopologySearch from './TopologySearch';
import ShortcutSearch from './ShortcutSearch';
import {
	Input,
	Collapse,
	Button,
	Row,
	Col,
	Icon,
	Form,
	Select,
	InputNumber,
	Card
} from 'antd';

import * as d3 from 'd3';

const FormItem = Form.Item;
const Option = Select.Option;
const OptGroup = Select.OptGroup;

import {
	
} from '../../action';


const Panel = Collapse.Panel;

class SearchBar extends Component {
	componentDidMount() {
		
	}
	state = {
		
	}
	render() {
		const { selectedFirstKey, selectedSecondKey } = this.props;
		console.log('selectedFirstKey===',selectedFirstKey);
		console.log('selectedSecondKey===',selectedSecondKey);
		console.log(selectedFirstKey!='' && selectedSecondKey=='');
    let content;
    if(selectedFirstKey!='' && selectedSecondKey=='') {
    	content = <div>
      		<NodeSearch setSearchType={this.props.setSearchType} />
      		<RelationSearch setSearchType={this.props.setSearchType} />
      		<TopologySearch setSearchType={this.props.setSearchType} />
      		<ShortcutSearch setSearchType={this.props.setSearchType} />
      	</div>
    }else {
	    switch(selectedSecondKey) {
	      case 'node':
	        content = <NodeSearch setSearchType={this.props.setSearchType} />
	        break;
	      case 'relation':
	        content = <RelationSearch setSearchType={this.props.setSearchType} />
	        break;
	      case 'topology':
	        content = <TopologySearch setSearchType={this.props.setSearchType} />  
	        break;
	      case 'shortcut':
	      	content = <ShortcutSearch setSearchType={this.props.setSearchType} />
	      	break;
	      case 'batching':
	      	content = <div>
      		<NodeSearch setSearchType={this.props.setSearchType} />
      		<RelationSearch setSearchType={this.props.setSearchType} />
      		<TopologySearch setSearchType={this.props.setSearchType} />
      		<ShortcutSearch setSearchType={this.props.setSearchType} />
      	</div>
	      	break;
	      default:
	      	return;
	    }
    }
		return (
			<div className="search-bar" ref="searchBar">
				<Card title={`节点总数: ${this.props.nodesCount} | 关系总数: ${this.props.relationshipsCount}`} /*extra={<a href="#" onClick={this.props.setExtendContent}>隐藏</a>}*/>
					{content}
				</Card>
			</div>
		)
	}
}

function mapState2Props(state) {
	let { graphData: { nodesCount, relationshipsCount } } = state;
	return { nodesCount, relationshipsCount };
}

SearchBar = connect(mapState2Props)(SearchBar);

export default SearchBar;